<!DOCTYPE html>
<html>
<head>
<title>Projectile Motion</title>
</head>
<body>
<canvas id="projectileCanvas" width="400" height="420"></canvas>
<script>
    const canvas = document.getElementById('projectileCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow.
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        // Draw line
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        // Draw arrowhead
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Drawing parameters ---
    const originX = 50;
    const originY = 350;
    const axisXEnd = 380;
    const axisYEnd = 50;
    
    const h_pixels = 220;
    const range_pixels = 280;
    
    const startX = originX;
    const startY = originY - h_pixels;
    const endX = originX + range_pixels;
    const endY = originY;

    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Draw Axes ---
    drawArrow(ctx, originX, originY, originX, axisYEnd); // Y-axis
    drawArrow(ctx, originX, originY, axisXEnd, originY); // X-axis

    // --- Draw Labels ---
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    ctx.fillText('O', originX - 15, originY + 15);
    ctx.fillText('y', originX, axisYEnd - 20);
    ctx.fillText('x', axisXEnd + 15, originY);
    
    ctx.textAlign = 'right';
    ctx.fillText('h', originX - 10, startY);

    // --- Draw Trajectory ---
    ctx.beginPath();
    ctx.setLineDash([5, 3]);
    ctx.moveTo(startX, startY);
    ctx.quadraticCurveTo(endX, startY, endX, endY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset dash

    // --- Draw Initial Velocity Vector (v₀) ---
    // The velocity vector is shown near the start of the trajectory.
    // NOTE: The original image has a physically inconsistent left-pointing arrow for a rightward trajectory.
    // This has been corrected to point right, consistent with the physics of the problem.
    const v0_len = 60;
    const v0_startX = startX + 15; // Slightly offset for clarity from the axis
    const v0_endX = v0_startX + v0_len;
    const v0_Y = startY;

    // Draw a thicker arrow for the vector, similar to the original's emphasis.
    ctx.save();
    ctx.lineWidth = 2;
    drawArrow(ctx, v0_startX, v0_Y, v0_endX, v0_Y, 12);
    ctx.restore();

    // Label for v₀. The original places the label next to the vector.
    // We place it next to the arrowhead (`-> v₀`) to maintain a similar layout style.
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.font = "italic 22px 'Times New Roman'";
    ctx.fillText('v', v0_endX + 8, v0_Y);
    ctx.font = "16px 'Times New Roman'";
    ctx.fillText('0', v0_endX + 8 + 12, v0_Y + 7);
    
    // --- Draw Caption ---
    ctx.font = "22px 'KaiTi'"; // KaiTi font is a good match for the original's style
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillText('题 3 图', canvas.width / 2, originY + 30);
</script>
</body>
</html>